<script lang="ts" setup>
import {ref} from "vue";
import {usePageOrdersApi} from "@/services/api";
import {useStore} from "vuex";
import type {OrderGoodsList, Orders, OrdersList, PageOrdersReqVO} from "@/interfaces/order";
import {onLoad, onReachBottom} from "@dcloudio/uni-app";

const store = useStore()
const list = ref<string[]>(['全部订单', '未付款', '待收货', '已完成', '退款'])
const curNow = ref<number>(0)
const sectionChange = (index: number) => {
  orderList.value = []
  pageOrdersReq.value.current = 1
  curNow.value = index
  pageOrdersReq.value.status = index
  init()
}
const pageOrdersReq = ref<PageOrdersReqVO>({
  current: 1,
  size: 10
})
const orderList = ref<OrdersList[]>([])
const init = async () => {
  pageOrdersReq.value.userId = store.getters["auth/getUserId"]
  try {
    const {data: res} = await usePageOrdersApi(pageOrdersReq.value)
    let list = Array.from(new Set(res.list.map((value: Orders) => value.id))).map(OrderId => res.list.filter((value: Orders) => value.id == OrderId))
    console.log(list)
    list = list.map((value: Orders[]): OrdersList => {
      return {
        address: value[0].address,
        createTime: value[0].createTime,
        goodsList: value.map((orders: Orders): OrderGoodsList => {
          return {
            id: orders.goodsId,
            images: orders.images,
            name: orders.goodsName,
            price: orders.price,
          }
        }),
        id: value[0].id,
        name: value[0].name,
        phone: value[0].phone,
        status: value[0].status,
        trackingNumber: value[0].trackingNumber,
        updateTime: value[0].updateTime
      }
    })
    console.log(list)
    orderList.value = [...orderList.value, ...list]
  } finally {

  }
}
onLoad((query: any) => {
  pageOrdersReq.value.status = parseInt(query?.status)
  curNow.value = parseInt(query?.status)
  init()
})
onReachBottom(() => {
  pageOrdersReq.value.current += 1
  init()
})
</script>

<template>
  <view class="container">
    <u-subsection :current="curNow" :list="list" font-size="24" @change="sectionChange"></u-subsection>
    <view class="content">
      <view
          v-for="(order,index) in orderList"
          :key="index"
          class="order-item"
      >
        <view class="order-id">订单号:{{ order.id }}</view>
        <view class="info">
          <view class="left">
            <view v-for="goods in order.goodsList" :key="goods.id">
              <up-image :show-loading="true" :src="goods.images.split(';')[0]" height="120px" width="120px"></up-image>
            </view>
          </view>
          <view class="right">
            <view class="total-price">￥{{ order.goodsList.reduce((prev, cur) => prev + cur.price, 0) }}</view>
            <view class="count">共{{ order.goodsList.length }}件</view>
          </view>
        </view>
        <view class="status">
          <view>{{ list[order.status] }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #f2f7ff;

  .content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 12px;

    .order-item {
      background-color: #ffffff;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;

      .order-id {

      }

      .info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .total-price {
            font-size: 16px;
          }

          .count {
            color: #999999;
            font-size: 12px;
          }
        }
      }

      .status {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
</style>